<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="范珍">
    <title>art-template使用示例</title>
    <!--导入需要使用的第三方js库-->
    <script src="template-web.js"></script>
</head>

<body>
    <main></main>
    <!--html模板
    添加 id
    说明类型为 text/html
    {{表达式}}
    支持 each 操作，类似for循环
    支持 if-else 操作 ，类似 if-else
    
    include 引入子模板
    用法: {{include '模板id'}} 
    注意： id不要和模板中变量重名
    作用：把一个大模板拆分成几个小模板，结构清晰
    -->
    <script id="book" type="text/html">
        <ul>
          {{each books bk i}}
             <li>{{bk}}</li>
          {{/each}}
        </ul>
    </script>
    <script id="test" type="text/html">
        <h1>{{title}}</h1>
        <ul>
            {{each books item i}}
                <li>{{item | toUpperCase | addBookMark}}--{{i}}</li>
            {{/each}}
        </ul>
        <ul>
            {{each prices p }}
                <li>{{p | toFixed:2}}</li>
            {{/each}}
        </ul>
        {{include 'book' }}
    </script>
    <script>
        // template添加过滤器
        // 过滤器：对于数据进行中间处理
        // template.defaults.imports.过滤器名称 = 操作函数
        // para1:待过滤的数据，旧值
        // 返回值: 过滤后的数据,新值
        // 用法：{{value | 过滤器1 | 过滤器2}}
        template.defaults.imports.addBookMark = 
        function(book){
            return '《' + book + '》';
        }
        template.defaults.imports.toUpperCase = function(str){
            return str.toUpperCase();
        }
        // 过滤器添加额外的参数
        //用法: {{value | 过滤器:参数2:参数3..}}
        template.defaults.imports.toFixed = function(p,num){
            return p.toFixed(num||2);
        }

        //1、省略发请求，获取数据
        //假如从服务端获取的数据如下
        var data = {
            title: '基本例子',
            isAdmin: true,
            list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'],
            books: ['高数','HTML5','javascript','java','c#'],
            prices:[
                1.23543,
                2.46467,
                3.45769
            ]
        };
        
        //2、 分析数据、页面结构，书写html模板

        //3、调用template方法，把模板和数据结合，形成html字符串
        // para1:模板id
        // para2：模板所需JSON数据
        var html = template('test',data);
        console.log(html);

        // 4、html写入容器标签
        document.querySelector('main').innerHTML = html;
    </script>
</body>

</html>


  <!--var main = document.querySelector('main');
        var html = '';
        html += '<h1>' + data.title + '</h1>';
        html += '<ul>';
        for(var i = 0 ; i < data.list.length ;i++){
            html += '<li>' + data.list[i] + '</li>';
        }
        html += '</ul>';
        main.innerHTML = html ;-->